<template>
  <div>
    <h3>台区详细信息</h3>
    <flexbox>
        <flexbox-item>
          <x-button type="primary" @click.native="back">返回</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="primary" @click.native="toEditArea" :disabled='!isAdmin'>编辑</x-button>
        </flexbox-item>
    </flexbox>
    <x-button type="warn" @click.native="delArea" style="margin-top:10px;" v-if='isAdmin'>删除</x-button>
    <group class="cell-body">
      <cell title="归属地" :value="data.location"></cell>
      <cell title="台区号" :value="data.areaNo"></cell>
      <cell title="台区地点" :value="data.address"></cell>
      <cell title="在线状态" :value="status"></cell>
      <cell title="用户" :value="data.user"></cell>
      <cell title="IP" :value="data.IP"></cell>
      <cell title="信道" :value="data.channel"></cell>
      <cell title="GPRS" :value="GPRS"></cell>
      <cell title="最后通讯时间" :value="data.lassUpdateTime"></cell>
      <cell title="日召时间" :value="data.callDate"></cell>
      <cell title="召测试间" :value="callTime"></cell>
      <cell title="运行模式" :value="mode"></cell>
      <cell title="平衡模式" :value="balanceMode"></cell>
      <cell title="变压器容量">{{data.transformerCapacity}}KVA</cell>
      <cell title="负载率限值">{{data.loadRateLimit}}%</cell>
      <cell title="不平衡度限值">{{data.imbalancesLimit}}%</cell>
      <cell title="零线电流限值">{{data.neutralWireLimit}}A</cell>
      <cell title="指令阈值" :value="data.cmdValue"></cell>
      <cell title="服务器一端口" :value="data.server1Port"></cell>
      <cell title="服务器一IP" :value="data.server1IP"></cell>
      <cell title="服务器一APN" :value="data.server1APN"></cell>
      <cell title="服务器二端口" :value="data.server2Port"></cell>
      <cell title="服务器二IP" :value="data.server2IP"></cell>
      <cell title="服务器二APN" :value="data.server2APN"></cell>
      <cell title="CT1" :value="data.CT1"></cell>
      <cell title="CT2" :value="data.CT2"></cell>
      <cell title="CCID" :value="data.CCID"></cell>
    </group>
    <loading :show="showLoading" text="加载中..."></loading>

    <confirm v-model="showConfirm" title="操作提示" content="将删除该台区，请再次确认？" @on-confirm="onConfirm">
    </confirm>
    <loading :show="showDele" text="删除中..."></loading>
    <toast v-model="showToast" type="cancel" :text="toastText"></toast>

  </div>
</template>

<script>
import { Group, XButton, Cell, Loading, Confirm, Toast,Flexbox,FlexboxItem} from "vux";
import Http from "./../unit/http.js";
import { setTimeout } from 'timers';

export default {
  components: {
    Group,
    XButton,
    Cell,
    Loading,
    Confirm,
    Toast,
    Flexbox,
    FlexboxItem,
  },
  data() {
    return {
      id: 0,
      GPRS: "",
      status: "",
      callTime: "",
      mode: "",
      balanceMode: "",
      data: {},

      showConfirm: false,
      showDele: false,
      showToast: false,
      showLoading:false,
      toastText:"",
      isAdmin: false
    };
  },

  mounted() {

    // this.loadingFailed()
    this.getId();
    this.getData(this.id);
    var role = sessionStorage.getItem("role")
    this.isAdmin = 1 == role;
  },

  watch: {
    GPRS: function() {
      this.showLoading = false;
      
    }
  },

  methods: {
    //没有考虑到请求网络失败的情况，暂时没用
    // loadingFailed() {
    //   setTimeout(function(){ 
    //     if(!this.data){ 
    //       this.showLoading = false;
    //       this.showToast = true;
    //       this.toastText = "加载失败，请检查网络。";
    //     }
    //    }, 1000);
    // },

    getId() {
      this.id = this.$route.query.id;
    },

    getData(id) {
      this.showLoading = true;
      const self = this;
      const param = { id: id };
      const url = "/yitai/admin/areaInfo";
      const success = function(response) {
       
        self.data = response.data.info;
        self.dealData();
       
      };
      const failed = function() {

        self.showToast = true;
        self.toastText = "加载失败，请重试";

      };
      Http.http(url, param, success, failed);
    },

    dealData() {
      if (this.data.GPRS == 0) {
        this.GPRS = "无";
      } else if (this.data.GPRS == 1) {
        this.GPRS = "有";
      } else {
        this.GPRS = "";
      }

      if (this.data.status == 0) {
        this.status = "不在线";
      } else if (this.data.status == 1) {
        this.status = "在线";
      } else {
        this.status = "";
      }

      this.callTime = this.data.callTime.slice(11);

      if (this.data.mode == 0) {
        this.mode = "手动";
      } else if (this.data.mode == 1) {
        this.mode = "自动";
      } else {
        this.mode = "";
      }

      if (this.data.balanceMode == 0) {
        this.balanceMode = "电流";
      } else if (this.data.balanceMode == 1) {
        this.balanceMode = "视在功率";
      } else if (this.data.balanceMode == 2) {
        this.balanceMode = "智能平衡";
      } else {
        this.balanceMode = "";
      }
    },

    back() {
      this.$router.go(-1);
    },

    toEditArea() {
      this.$router.push({ path: "/addArea", query: { id: this.id } });
    },

    delArea() {
      this.showConfirm = true;
    },
    onConfirm() {
      const self = this;
      self.showDele = true;
      const param = { id: self.id };
      const url = "/yitai/admin/deleteArea";
      const success = function(response) {
      
        self.id = 0;
        self.data = {};
        self.showDele = false;
        setTimeout(() => {
            self.back();
        }, 300); 
      };
      const failed = function() {
      
        self.showDele = false;
        self.showToast = true;
        self.toastText = "删除失败，请再试。"
      };
      Http.http(url, param, success, failed);
    }
  }
};
</script>





<style scoped >
h3 {
  margin-bottom: 20px;
}
button.weui-btn {
  font-size: 18px;
}
.weui-btn_primary {
  background-color: #005e9c;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
  color: rgba(255, 255, 255, 0.6);
  background-color: #034b7a;
}
.weui-btn_disabled.weui-btn_primary {
  background-color: #3978a1;
}
.cell-body  {
  padding: 0 2px;
}
.cell-body .weui-cells .weui-cell {
  font-size: 18px ;
}

</style>  